<template>
  <view class="dropdown">
    <view
      class="input"
      :style="{ width: WdHt.w, height: WdHt.h }"
      @click="showDrop"
    >
      <u--input
        placeholder="请选择角色"
        border="surround"
        :value="labelA"
        :customStyle="{
          height: '100%',
          borderColor: '#7b7b7b !important'
        }"
        readonly
      ></u--input>
      <view :class="['down', bol ? 'up' : '']" @click.stop="showDrop">
        <image
          src="https://oss.xhoven.com/2052ec1f205bfcae39637e23dbd581a1.png"
          mode="scaleToFill"
        />
      </view>
    </view>
    <view class="options" v-if="bol">
      <view
        :class="['item', a == v.value ? 'active' : '']"
        v-for="(v, i) in options"
        :key="i"
        @click="clickEvent(v)"
        ><view>{{ v.label }}</view>
        <image
          v-if="a == v.value"
          src="https://oss.xhoven.com/1de95b9230796a752f41febc1fb34bb9.png"
          mode="scaleToFill"
        />
      </view>
      <view v-if="!options.length" :class="['item']"
        ><view>暂无角色</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    },
    WdHt: {
      type: Object,
      default: {
        w: '407rpx',
        h: '64rpx'
      }
    },
    options: {
      type: Array,
      default: []
    }
  },
  data () {
    return {
      bol: false,
      labelA: '',
      a: '',
      bolA: false
    }
  },
  methods: {
    showDrop () {
      this.bol = !this.bol
      this.checkOptions()
    },
    clickEvent (v) {
      this.a = v.value
      this.$emit('input', v.value)
      this.options.forEach(j => {
        if (this.a == j.value) {
          this.labelA = j.label
        }
      })
    },
    checkOptions () {
      if (this.bolA) return
      if (!this.options.length) {
        uni.$u.toast('请到后台创建角色!')
        this.bolA = true
      }
    },
    setValue (v) {
      this.a = v
      this.options.forEach(j => {
        if (this.a == j.value) {
          this.labelA = j.label
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.input {
  position: relative;
  .down {
    position: absolute;
    top: 15rpx;
    right: 20rpx;
    width: 30rpx;
    height: 30rpx;
    z-index: 999;
  }
  .up {
    transform: rotateX(180deg);
    top: 20rpx;
  }
}
.options {
  padding: 0 30rpx;
  background-color: #fff;
  border-radius: 0 0 10rpx 10rpx;
  position: relative;
  border: 1px solid #7b7b7b;
  .item {
    padding: 26rpx;
    font-size: 25rpx;
    border-bottom: 1px solid #f2f2f2;
    color: #666666;
    &:last-child {
      border-bottom: 0;
    }
  }
  .active {
    color: #3e73fe;
    display: flex;
    justify-content: space-between;
    width: 100%;
    image {
      width: 30rpx !important;
      height: 30rpx !important;
    }
  }
}
</style>
